import React, { useEffect, memo, useState } from 'react';
import { connect } from "react-redux"
import * as actionType from "./store/actionCreators"
import Scroll from "@/baseUI/scroll"
import SearchInput from "@/components/main/searchInput/SearchInput"
import RotationChart from "@/components/main/rotationChart/RotationChart"
import MenuIcon from "@/components/main/menuIcon/MenuIcon"
import Subsidy from "@/components/main/subsidy/Subsidy"
import SelectMenu from "@/components/main/selectMenu/SelectMenu"
import SetMenu from "@/components/main/setMenu/SetMenu"
import BackTop from "@/components/main/backTop/BackTop"
import { forceCheck } from 'react-lazyload';
import "./Main.css"
import * as api from '@/api/index'


const Main = (props) => {
    // console.log(props,'props');
    const [showSetMenu, setShowMenu] = useState(0)
    const [backTop, setBackTop] = useState(0);
    const [list, setList] = useState([])
    const [defList, setDefList] = useState([])
    let [page, setPage] = useState(1)
    const { maindata, getMainDataDispatch } = props
    // console.log(maindata,"maindata");
    // console.log(getMainDataDispatch,'getMainDataDispatch');
    const { rotationImg = [], selectMenu = [] } = maindata
    // console.log(maindata,'=============');
    // 上拉加载更多
    const handlePullUp = () => {
        console.log('上拉加载更多');
        setPage(++page)
    }
    // 下拉刷新
    const handlePullDown = () => {
        console.log('下拉刷新');
    }
    const fetchList = () => {
        api
            .reqlist(page)
            .then(res => {
                setList([...res.data.data.ListData])
                setDefList([...res.data.defaultdata.list])
            })
    }
    useEffect(() => {
        if (!maindata.length) {
            getMainDataDispatch()
        }
        fetchList()
    }, [])

    useEffect(() => {
        fetchList()
    }, [++page])

    return (

        <div className="main">
            <SearchInput />
            <Scroll
                ref={scroll}
                onScroll={
                    (e) => {
                        // console.log(e.y);
                        // 是否显示<SetMenu/>
                        if (e.y < -378) {
                            setShowMenu(1)
                        }
                        else {
                            setShowMenu(0)
                        }
                        if (e.y < -680) {
                            setBackTop(1)
                        }
                        else {
                            setBackTop(0)
                        }
                        forceCheck()//懒加载中判断图片是否加载的组件
                    }
                }
                direction={"vertical"}
                refresh={false}
                pullUp={handlePullUp}
                pullDown={handlePullDown}
            >
                <div className="main-padding">
                    <RotationChart rotationImg={rotationImg} />
                    <MenuIcon />
                    {/* 硬核补贴 */}
                    <Subsidy />
                    {/* 精选 */}
                    <SelectMenu selectMenu={selectMenu} list={list} defList={defList} />
                </div>
            </Scroll>
            {/* 回到顶部 */}
            <BackTop display={backTop} />
            {/* 精选栏固定 */}
            <SetMenu selectMenu={selectMenu} display={showSetMenu} />
        </div>

    )
}

const mapStateToProps = (state) => {
    // console.log(state,'mapStateToProps');
    return {
        maindata: state.main.maindata
    }
}
const mapDispatchToProps = (dispatch) => {
    // console.log('---',dispatch);
    return {
        getMainDataDispatch() {
            dispatch(actionType.getMainData())
        }
    }
}
export default connect(mapStateToProps, mapDispatchToProps)(memo(Main))